<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="login">
    <h1>防疫物品在线销售登录界面</h1>
    <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="账号" prop="account">
            <el-input v-model="user.account" placeholder="请输入账号"
                      style="width: 250px"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" placeholder="请输入密码"
                      style="width: 250px" show-password></el-input>
            <el-link type="primary" href="/brand-case/register.html">没有账号？请点击注册</el-link>
        </el-form-item>

        <el-form-item label="用户身份" prop="id">
            <el-radio-group v-model="user.flag">
                <el-radio label="管理员"></el-radio>
                <el-radio label="普通用户"></el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="loginUser">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#login",
        methods: {
            loginUser(){
                var _this = this;

                // 发送ajax请求，添加数据
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/user/selectAll",
                    data:_this.user
                }).then(function (resp) {
                    if (resp.data == "managerSuccess") {
                        // 弹出登录消息提示
                        _this.$message({
                            message: '恭喜你，管理员登录成功',
                            type: 'managerSuccess'
                        });
                        window.location.href = 'http://localhost:8080/brand-case/goods.html';
                        }   else if(resp.data == "normalUserSuccess"){
                        _this.$message({
                            message: '恭喜你，普通用户登录成功',
                            type: 'normalUserSuccess'
                        });
                    }
                    else{
                        _this.$message({
                            message: '登录失败！您的用户名或密码错误',
                            type: 'fail'
                        });
                    }
                })

            },
            resetForm() {
                this.$refs.form.resetFields();
            }
        },
        data(){
            return {
                user: {
                    flag:'',
                    account:'',
                    password:''
                }
            }
        }

    })
</script>
</body>
</html>